﻿import G6Editor from '@antv/g6-editor'
import store from '../../../store'
const Flow = G6Editor.Flow
// 自定义一个矩形节点
Flow.registerNode('custom_rect', {
  draw (item) {
    const group = item.getGraphicGroup()
    const model = item.getModel()
    let fillColor = ''
    if (model.style) {
      fillColor = model.style.fill
    }
    const width = parseInt(model.size.slice(0, model.size.indexOf('*')))
    const height = parseInt(model.size.slice(model.size.indexOf('*') + 1))
    const x = -width / 2
    const y = -height / 2
    const borderRadius = this.self_borderRadius
    const keyShape = group.addShape('rect', {
      attrs: {
        x,
        y,
        width: width,
        height: height,
        radius: borderRadius,
        stroke: fillColor || this.self_strokeColor,
        fill: fillColor || '#fff'
      }
    })
    // 类型 logo
    group.addShape('image', {
      attrs: {
        img: this.self_reactImg,
        x: x + 10,
        y: y + 6,
        width: 24,
        height: 24
      }
    })
    // 名称文本
    group.addShape('text', {
      attrs: {
        text: model.label,
        x: x + 40,
        y: y + 20,
        fontSize: 14,
        textAlign: 'start',
        textBaseline: 'middle',
        fill: this.self_rectTextColor
      }
    })
    return keyShape
  }
})
// 定义一个圆形节点
Flow.registerNode('custom_circle', {
  draw (item) {
    const group = item.getGraphicGroup()
    const model = item.getModel()
    const r = 18
    let fillColor = ''
    if (model.style) {
      fillColor = model.style.fill
    }
    const circle = group.addShape('circle', {
      attrs: {
        x: 0,
        y: 0,
        r: r,
        stroke: fillColor || this.self_strokeColor,
        fill: fillColor || '#fff'
      }
    })
    group.addShape('text', {
      attrs: {
        x: 0,
        y: r * 2,
        textAlign: 'center',
        text: model.label,
        fill: this.self_circleTextColor
      }
    })
    // 类型 logo
    group.addShape('image', {
      attrs: {
        img: this.self_circleImg,
        x: -12,
        y: -12,
        width: 24,
        height: 24
      }
    })
    return circle
  }
})
// 审核节点
Flow.registerNode('audit_item', {
  self_borderRadius: 4,
  self_strokeColor: '#CED4D9',
  self_rectFillColor: '#000000',
  self_rectTextColor: '#333',
  self_reactImg: 'static/style/common/images/audit.svg',
  // 设置锚点
  anchor: [
    [ 0.5, 0, { type: 'input' } ], // 上边的中点
    [ 0.5, 1, { type: 'output' } ], // 下边的中点
    [ 0, 0.5, { type: 'input' } ], // 左边的中点
    [ 1, 0.5, { type: 'output' } ], // 右边的中点
    [ 0.25, 0, { type: 'output' } ],
    [ 0.25, 1, { type: 'input' } ],
    [ 0.75, 0, { type: 'input' } ],
    [ 0.75, 1, { type: 'output' } ],
    [ 0, 0.2, { type: 'input' } ],
    [ 0, 0.8, { type: 'output' } ],
    [ 1, 0.2, { type: 'output' } ],
    [ 1, 0.8, { type: 'input' } ]
  ]
}, 'custom_rect')

// 开始节点
Flow.registerNode('start_item', {
  self_circleTextColor: store.state.currentTheme === 'theme_dark' ? '#fff' : '#333',
  self_strokeColor: '#CED4D9',
  self_circleImg: 'static/style/common/images/start.svg',
  // 设置锚点
  anchor: [
    [ 0.5, 0, { type: 'input' } ], // 上边的中点
    [ 0.5, 1, { type: 'output' } ], // 下边的中点
    [ 1, 0.5, { type: 'output' } ], // 右边的中点
    [ 0, 0.5, { type: 'input' } ] // 左边的中点
  ]
}, 'custom_circle')

// 结束节点
Flow.registerNode('end_item', {
  self_circleTextColor: store.state.currentTheme === 'theme_dark' ? '#fff' : '#333',
  self_strokeColor: '#CED4D9',
  self_circleImg: 'static/style/common/images/end.svg',
  // 设置锚点
  anchor: [
    [ 0.5, 0, { type: 'input' } ], // 上边的中点
    [ 0.5, 1, { type: 'output' } ], // 下边的中点
    [ 1, 0.5, { type: 'output' } ], // 右边的中点
    [ 0, 0.5, { type: 'input' } ] // 左边的中点
  ]
}, 'custom_circle')
